<template>
  <div id="mobilePersonalProducts">
    <mescroll-vue
      ref="mescroll"
      :down="mescrollDown"
      :up="mescrollUp"
      @init="mescrollInit"
    >
      <div class="productGroup">
        <div
          class="productItem"
          v-for="item in productData"
          :key="item.id"
          @click.stop="buyProduct(item)"
        >
          <div class="productImages">
            <img :src="show_url + item.images[0]" />
            <img
              class="nullStock"
              v-if="item.goods_stock === 0"
              src="@/assets/images/mobile_black/home/soldout.png"
            />
            <!-- <div class="sellDay" v-if="item.is_buy == 0">
              {{ item.sellTime }}
            </div> -->
          </div>

          <div class="productDesc">
            <p class="productTitle">{{ item.goods_name }}</p>

            <div class="buy">
              <div class="price">
                <span>¥</span>
                <span>{{ item.price }}</span>
              </div>

              <el-button class="buyButton" @click.stop="productCancel(item)">
                <slot name="cancelFavorite"></slot>
                <slot name="cancelCollection"></slot>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </mescroll-vue>

    <div class="noneProductData" v-if="productData.length === 0">
      <slot name="noneFavorite"></slot>
      <slot name="noneCollection"></slot>
    </div>
  </div>
</template>

<script>
// 引入mescroll的vue组件
import MescrollVue from "mescroll.js/mescroll.vue";

export default {
  name: "MobilePersonalProducts",
  props: {
    productData: Array,
    show_url: String,
  },
  components: {
    MescrollVue, // 注册mescroll组件
  },
  data() {
    return {
      mescroll: null, // mescroll实例对象
      mescrollDown: { use: false }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        auto: false,
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10, //每页数据条数,默认10
        },
        htmlNodata:
          '<p class="upwarp-nodata" style="font-size: 0.14583rem;font-family: Microsoft YaHei;font-weight: 600;color: #808080;">-- 没有更多了 --</p>',
        htmlLoading:
          '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip" style="font-size: 0.14583rem;font-family: Microsoft YaHei;font-weight: 600;color: #808080;">加载中..</p>',
        noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
        // toTop: {
        //   //回到顶部按钮
        //   src: "@/assets/images/mail/mail_arrow_top.png", //图片路径,默认null,支持网络图
        //   offset: 1000, //列表滚动1000px才显示回到顶部按钮
        // },
        // empty: {
        //   //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
        //   warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
        //   icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
        //   tip: "暂无相关数据~", //提示
        // },
        // isBounce: false,
      },
    };
  },
  beforeRouteEnter(to, from, next) {
    // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
    next(vm => {
      // 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter();
    });
  },
  beforeRouteLeave(to, from, next) {
    // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
    // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
    next();
  },
  methods: {
    // 点击按钮取消点赞
    productCancel(item) {
      this.$emit("productCancel", item);
    },
    buyProduct(item) {
      this.$emit("buyProduct", item);
    },

    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      let payload = {
        page: page,
        mescroll: mescroll,
      };
      this.$emit("upCallback", payload);
    },
  },
};
</script>

<style lang="less" scoped>
#mobilePersonalProducts {
  width: 100%;
  height: 100%;

  /*通过fixed固定mescroll的高度*/
  .mescroll {
    padding: 0 30px;
    position: fixed;
    left: 0;
    top: 104px;
    bottom: 0;
    height: auto;
  }

  .productGroup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .productItem {
      width: 44.2667vw;
      background: #2b2c2d;
      box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
      border-radius: 12px;
      margin-bottom: 26px;

      .productImages {
        position: relative;
        height: 100%;
        img {
          width: 100%;
          height: 44.2667vw;
          background: #e7e7e7;
          border-radius: 12px 12px 0px 0px;
        }

        .nullStock {
          position: absolute;
          left: 0;
          top: 0;
          background: #000000;
          opacity: 0.6;
        }

        .sellDay {
          background: url("../../../assets/images/mobile/sellBtnBg.png");
          background-size: 100% 100%;
          font-size: 20px;
          font-weight: 500;
          color: #000000;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 6px 19px 2px 10px;
          z-index: 999;
        }
      }

      .productDesc {
        width: 100%;
        height: 168px;

        .productTitle {
          width: 38.9333vw;
          height: 72px;
          font-size: 28px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 36px;
          padding: 0;
          margin: 16px 20px 24px 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }

        .buy {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0 20px;

          .price {
            span {
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #00ffb0;
              line-height: 28px;
            }

            span:nth-child(1) {
              font-size: 20px;
            }

            span:nth-child(2) {
              font-size: 24px;
              margin-left: 3px;
            }
          }

          .buyButton {
            width: 132px;
            height: 36px;
            border-radius: 4px;
            border: 1px solid #999999;
            backdrop-filter: blur(3px);
            background: none;
            padding: 0;
            margin: 0;
          }
        }
      }
    }
  }

  .noneProductData {
    width: 100%;
    font-size: 28px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #282828;
    opacity: 0.6;
    text-align: center;
  }
}
</style>
